<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/mobile-header.jsp"%>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0, user-scalable=0">
<title>商品详情</title>
<link href="${ctxStatic }/site/themes/DianShangMuBan/css/boilerplate.css" rel="stylesheet" type="text/css">
<link href="${ctxStatic }/site/themes/DianShangMuBan/css/css.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="${ctxStatic }/site/themes/DianShangMuBan/js/jQuery.js"></script>
<script type="text/javascript" src="${ctxStatic }/site/themes/DianShangMuBan/js/swipe.js"></script>
<script type="text/javascript" src="${ctxStatic }/site/themes/DianShangMuBan/js/zepto.js"></script>

<script type="text/javascript">

function addShoppingCart(){
	$.get("${ctxMobileSite}/shopping/addshoppingCart?pid=${product.id}&uid=${product.user.id}", function(data){
		var number = parseInt($("#tatolNum").html());
		$("#tatolNum").html(number+1);
		$(".circle").show();
		alert("Data Loaded: " + data);
	});
}

</script>


</head>
<body>
<div class="gridContainer clearfix" style="background-color:#f3f3f3;"> 
  
  <!--
	幻灯片管理
	-->
  <div style=" clear:both;width:100%;overflow-X: hidden;float:left;position:inherit; margin-bottom:50px;">
    <div style="-webkit-transform:translate3d(0,0,0);">
      <div id="banner_box" class="box_swipe" style="visibility: visible;">
        <ul style="list-style: none; width: 4480px; transition: 500ms; -webkit-transition: 500ms; -webkit-transform: translate3d(-1280px, 0, 0);">
        	<c:forEach items="${product.microProductImg }" var="microProductImg">
          		<li style="width: 640px; display: table-cell; vertical-align: top;"> 
          			<a onclick="${ctxMobileSite }/viewImgs/${product.id}"> 
          				<img src="${ctxUser}/product/${microProductImg.img }" alt="1" style="width:100%;"/> 
          			</a> 
          		</li>
        	</c:forEach>
        </ul>
        <ol>
         <c:forEach items="${product.microProductImg }"		var="microProductImg"  varStatus="var" >
          <li   ${var.count eq 0?'class="on"':'' } ></li>
         </c:forEach>
        </ol>
      </div>
    </div>
    <script>
		$(function(){
			new Swipe(document.getElementById('banner_box'), {
				speed:500,
				callback: function(){
					var lis = $(this.element).next("ol").children();
					lis.removeClass("on").eq(this.index).addClass("on");
				}
			});
		});
	</script>
    <div class="bgbaise" >
      <p style="font-size:18px;">${product.name }</p>
      <p class="fontRed" style="padding-top:3%">${product.title  }</p>
      <p style="padding-top:3%"><font size="4" color="#FF0000"><strong>￥${product.price/100 }</strong></font></p>
    </div>
    <!-- 
		    <div class="bgbaise">
		     <span style="font-size:18px;">促销</span><span style="padding-left:5%; color:#F00">${product.title }</span>
		    </div>
		    <div class="bgbaise">
		      <p><span style="font-size:18px;">规格</span><span style="padding-left:5%">11件</span></p>
		    </div>
		    <div class="bgbaise">
		      <p><span style="font-size:18px;">送至</span><span style="padding-left:5%">河北>邯郸市>丛台区</span></p>
		      <p style="color:#CCC; padding-left:15%; padding-top:5%">无货</p>
		    </div>
		    <div class="bgbaise">
		      <span style="font-size:18px;">延保服务</span>
		    </div>
     -->
    <div style="width:90%; height:20%;border-top:1px #e6e6e6 solid; padding:5%; margin-top:5%; background-color:#FFF">
    </div>
  </div>
  <footer class="huifoot">
	<span class="anniu Orange" onclick="location='${ctxMobileSite}/shopping/createPay?productId=${product.id}&uid=${product.user.id}&wechatId=ohqnZjj198iSfuYXMTnmIgNb-wfI'">&hearts;&nbsp;&nbsp;  购买</span> 
	<span onclick="addShoppingCart();"   class="anniu red">&oplus;&nbsp;&nbsp; 加入购物车</span> 
	<span class="anniu2 huise" onclick="window.location.href='${ctxFront }/site/shopping/shoppingCart?uid=${uid}&wechatId=${wechatId}'" >&#xe015;</span>
	<c:if test="${tatol eq 0 }">
		<div class="circle" style="top: 20%;left: 85%; text-align:center; color:#FFF; display:none;">
	   		<span id="tatolNum">${tatol}</span>
		</div>
	</c:if>
	<c:if test="${tatol ne 0 }">
		<div class="circle" style="top: 20%;left: 85%; text-align:center; color:#FFF;">
	   		<span id="tatolNum">${tatol}</span>
		</div>
	</c:if>
  </footer>
</div>

</body>
</html>
